<template>
<div style="width:100%;">
  <div  class="warp">
    <div id="wavesurfer" ></div>
    <div id="wave-timeline" ref="wave-timeline"></div>
  </div>
  <div class="grid-content bg-purple-dark">
    <el-button type="primary" @click="plays">
      <i class="el-icon-video-play"></i>
      播放 /
      <i class="el-icon-video-pausee"></i>
      暂停
    </el-button>
    </div>
    <div class="box">
      <!-- <div style="height:100px"></div> -->
      <ul class="warp"  ref="warp">
        <li style="height:80px"></li>
        <li style="cursor: pointer;" @click="add(i)" v-for="i in lyicList" :key="i.start" :style="`color:${i.text == activetext ? 'yellowgreen': 'black'}`">{{i.text}}</li>
        <li style="height:80px;"></li>
      </ul>
    </div>
</div>
</template>

<script>

import WaveSurfer from 'wavesurfer.js' 
import Timeline from 'wavesurfer.js/dist/plugins/timeline.js'



export default {
  name:'highCharts',
  data(){
    return {
      apenaa:true,
      wavesurfer:null,
      infoData:[
        {
          text: "央广",
          idx: 111,
          url:'test.map3'
        },
        {
          text: "央广",
          idx: 222,
          url:'test.map3'
        },
      ],
      waveList:{},
      // 歌词数据
      lyicList: [
        {
          start: 0,
          end: 2,
          text: "小三做一轮 把那前后攻守",
        },
        {
          start: 2,
          end: 4,
          text: "反正不需要谁 把我伤害",
        },
        {
          start: 4,
          end: 6,
          text: "忘记犯罪 变成被我曾得到",
        },
        {
          start: 6,
          end: 7,
          text: "失效的仓库",
        },
        {
          start: 7,
          end: 9,
          text: "前后后期 打开了窗户",
        },
        {
          start: 9,
          end: 11,
          text: "整点土地 再去荒芜",
        },
        {
          start: 11,
          end: 12,
          text: "荒芜可是 无论怎么努力",
        },
        {
          start: 12,
          end: 13,
          text: "就算被荒出",
        },
        {
          start: 13,
          end: 15,
          text: "缝好我们的翅膀",
        },
        {
          start: 15,
          end: 17,
          text: "都拿着盒子 早被我打开",
        },
        {
          start: 17,
          end: 18,
          text: "如果早就没有退步",
        },
        {
          start: 18,
          end: 20,
          text: "每个对手是由我的强度",
        },
        {
          start: 20,
          end: 28,
          text: "我自己 还是有人",
        },
      ],
      num:0,
      activetext:''

    }
  },

  methods:{

    // 播放时暂停，播放时暂停
    plays() {
      this.wavesurfer.playPause()
    },
    add(i){
      this.wavesurfer.stop()
      this.wavesurfer.skip(i.start)
      this.wavesurfer.play()

    },
    // 加载
    createwavesurfer(element){
      let audio =  require('../assets/audio/test.mp3')
      this.$nextTick(()=>{
        this.wavesurfer = WaveSurfer.create({ 
          container: '#wavesurfer',
          backend: 'MediaElement',
          url:audio,
          waveColor: '#666', //未播放的
          progressColor: '#000',  //播放之后的
          backgroundColor:'#000',
          plugins: [
            Timeline.create({
              container: '#wave-timeline'
            })
          ]
        })
        this.wavesurfer.on('audioprocess',(a)=>{
          this.num = Math.floor(a)
          this.lyicList.forEach((item,idx)=>{
            if(item.start == this.num){
              this.$refs.warp.scrollTop = (idx * 41)
              this.activetext = item.text
            }
            if(this.num == this.lyicList[this.lyicList.length -1].end) this.activetext = ''
          })
        })
        this.wavesurfer.on('pause',(a,b,c)=>{
          this.activetext = ''
        })
      })
    },

  },

  watch:{
    num:{
      immediate:true,
      handler(val){
        console.log('val: ', val);
        // console.log(this.$refs.warp)
        // 最前面和最后面的占位空格都是80
        // 每一个元素是41
        this.lyicList.forEach((item,idx)=>{
          if(item.start == val){
            this.$refs.warp.scrollTop = (idx * 41)
            this.activetext = item.text
          }
          if(val == this.lyicList[this.lyicList.length -1].end) this.activetext = ''
        })
      }
    }
  },
  computed:{},

  created(){},
   mounted(){
    this.createwavesurfer(this.infoData[0])
    // let url = 'blob:https://wavesurfer.xyz/443e49ca-be0b-4e49-9dd3-86b25efa5128'
    // // fetch(url).then(v=>{
    // //   console.log('v',v)
    // // })
    // this.wavesurfer =  WaveSurfer.create({ 
    //   container: this.$refs.wavesurfer,
    //   // backend: 'MediaElement',
    //   url:audio,
    //   waveColor: '#666', //未播放的
    //   progressColor: '#000',  //播放之后的
    //   backgroundColor:'#000',
    //   // normalize: true,
    //   // mediaControls: true,
    //   // preload: true,
    //   plugins: [
    //       // 光标插件
    //       // CursorPlugin.create({
    //       //   showTime: true,
    //       //   opacity: 1,
    //       //   customShowTimeStyle: {
    //       //     'background-color': '#000',
    //       //     color: '#fff',
    //       //     padding: '2px',
    //       //     'font-size': '10px'
    //       //   }
    //       // }),
    //       // 时间轴插件
    //       // Timeline.create({
    //       //   container: '#wave-timeline'
    //       // })
    //     ]
    // })
    // wavesurfer.loadBlob('blob:http://localhost:8080/e5abe3e2-1bf6-452e-b875-a68047433dc7');
    // wavesurfer.load('http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3');
    // this.wavesurfer.load('https://wavesurfer.xyz/443e49ca-be0b-4e49-9dd3-86b25efa5128');
    
  },
  beforeDestroy(){}

}

</script>

<style scoped lang="less">
.warp{
  width: 100%;
}
.box{
  border: 1px solid red;
  width: max-content;
  margin: 80px auto;
}
.warp{
  width: 300px;
  height: 200px;
  overflow-y: auto;
  margin: 0;
  li{
    font-style: normal;
    text-align: center;
    padding: 10px 0;
  }

}
</style>